<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>汇云平台</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  </head>
  <style>
    /* 重置&默认(reset&base)(tags) */
    *[hidefocus] {
        outline: none;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
        display: block;
    }
    audio, canvas, video {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }
    audio:not([controls]) {
        display: none;
        height: 0;
    }
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
        padding: 0;
        margin: 0;
    }
    fieldset, img, html, body, iframe {
        border: 0;
    }
    html{
        overflow-y:scroll;
        color:#fff;
    }
    body {
        background: #fff;
        font-family:"Hiragino Sans GB","Microsoft YaHei","微软雅黑","arial","simsun","宋体";
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    li {
        list-style: none;
    }
    .g-doc{
        background: #232629;
    }
    .g-hd{
        width:100%;
        background: #1c1f21;
    }
    .m-topbar{
        position: relative;
        margin:0 auto;
        background: #1c1f21;
        width:1000px;height:80px;
    }
    .m-topbar .u-logo{
        position: absolute;
        top:16px;left:57px;
        width:160px;height:50px;
        background:url('images/logo.png') no-repeat;
    }

    /*轮播banner*/
    .m-banner{
        position:relative;width:100%;background:#232629;
        margin-top:50px;
    }
    .m-banner ul li.slide{
        height:500px;
        float:left;
    }
    .m-banner ul li.slide div{
        position: relative;
        width:1000px;
        height:500px;
        margin:0 auto;
        overflow: hidden
    }
    .m-banner ul li.slide-0 div{
        background:url('images/banner/0.png') no-repeat;
    }
    .m-banner ul li.slide-1 div{
        background:url('images/banner/1.png') no-repeat;
    }
    .m-banner ul li.slide-2 div{
        background:url('images/banner/2.png') no-repeat;
    }
    .m-banner ul li.slide .title{

        font-size:50px;
        letter-spacing:4px;
        font-weight:normal;
        color:#21c1dc;
        position: absolute;
        left:50px;
        top:50px;
    }
    .m-banner ul li.slide .desc{
        font-size:20px;
        color:#fff;
        position: absolute;
        left:50px;
        top:135px;
    }
    .m-banner ul li.slide .more{
        font-size:16px;
        color:#fff;
        position: absolute;
        left:50px;
        top:253px;
        border:1px solid #fff;
        display: block;
        width:115px;
        height:38px;line-height: 38px;
        text-align: center;
        text-decoration: none;
    }
    .m-banner ul li.slide .more:hover{
        text-decoration: none;
        /*background:#fff;*/
        color:#21c1dc;
        border:1px solid #21c1dc;
    }
    .m-banner .dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20px;
        text-align: center;
	}
    /*轮播触点*/
    .m-banner .dots li {
        position: relative;
        display: inline-block;
        width: 16px;
        height: 16px;
        margin: 0 12px;
        border: 1px solid #21c1dc;
        border-radius: 16px;

        cursor: pointer;
        /*opacity: .4;*/

        -webkit-transition: background .5s, opacity .5s;
        -moz-transition: background .5s, opacity .5s;
        transition: background .5s, opacity .5s;
    }
    .m-banner .dots li span{
        position: absolute;
        top:2px;
        left:2px;

        width: 10px;
        height: 10px;
        border: 1px solid #21c1dc;
        background: #21c1dc;
        border-radius: 10px;
        display: none;
        /*opacity: 1;*/
    }
    .m-banner .dots li.active  span{
       display: inline-block;
    }
  </style>
  <body class="g-doc">
    <div class="g-hd"><div class="m-topbar"><div class="u-logo"></div></div></div>
    <div class="m-banner" id="banner" >
        <ul class="">
            <li class="slide slide-0">
                <div>
                    <h1 class="title">在线教育</h1>
                    <p class="desc">在线税务培训  帮您轻松 玩转业务升级</p>
                    <a class="more" href="#">了解更多</a>
                </div>
            </li>
            <li class="slide slide-1">
                <div>
                    <h1 class="title">知识平台</h1>
                    <p class="desc">展现大数据分析  汇集税务相关知识案例</p>
                    <a class="more" href="#">了解更多</a>
                </div>
            </li>
            <li class="slide slide-2">
                <div>
                    <h1 class="title">SaaS平台</h1>
                    <p class="desc">覆盖多个种类  一对一提供解决方案</p>
                    <a class="more" href="http://saas.huitax.com">了解更多</a>
                </div>

            </li>
        </ul>
    </div>
    <!-- built files will be auto injected -->
  </body>
  <script src="lib/jquery-latest.min.js"></script>
  <script src="lib/unslider.js"></script>
  <script>
    $(document).ready(function() {
         $('#banner').unslider({
             speed: 500,
	         delay: 3000,
             complete: function() {
                //  $(".title").animate({left:"50px"},"fast");
             },
             dots: true,
             }
        );
    });
  </script>
</html>
